<template>
  <div class="alubmu-card-wrap" v-if="album" @click="goToAblumDetail">
    <div class="alubmu-card-poster">
      <div class="count">
        <Icon :name="getrelIcon(album.icon)" size="10" /> {{ album.count }}
      </div>
      <img
        :src="`${album.pic}?imageView&thumbnail=250y250&quality=75&tostatic=0`"
        class="img"
      />
    </div>
    <div class="alubmu-card-title line-clamp2">
      {{ album.title }}{{ album.title }}
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
  props: {
    album: Object as PropType<CustomTypeAlubm.Album>,
  },
  methods: {
    getrelIcon(str) {
      if (str) {
        return str;
      } else {
        return "";
      }
    },
    goToAblumDetail() {
      console.log(this.album);
      this.$router.push({
        path: "/ablumDetail",
        query: { id: this.album?.id },
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.alubmu-card-wrap {
  width: 244px;
  margin-right: 9px;
  margin-bottom: 32px;
}
.alubmu-card-poster {
  position: relative;
  width: 244px;
  height: 244px;
  .count {
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
.alubmu-card-title {
  margin-top: 10px;
  padding: 0 5px;
}
</style>
